<template>
	<view class="">
		<u-navbar title="優惠券管理" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="tianjia">添加</view>
		</u-navbar>
		<u-sticky bgColor="#fff">
			<view class="flexbetween dingwei" style="top: 10rpx;">
				<view class="flexcenter " :class="tab_type==item.value?'baisebj':'huangsebj'" v-for="item in toplist"
					:key="item.value" @click="tab_type=item.value;init()"
					style="width: 50%;padding: 15rpx;box-sizing: border-box;">{{item.name}}</view>
			</view>
			<view class="" style="padding-bottom: 20rpx;">
				<u-tabs :list="tabslist" :scrollable="false" lineColor="#ffb800" @click="changetab" :activeStyle="{
			    color: '#ffb800',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			            color: '#333333',
						fontWeight: '540',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!ralllist.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="mainpadding_top radius" style="background-color: #fbf6f1;" v-for="item in ralllist"
				:key="item.id">
				<view class="xiaohui titletext" v-if="item.status==1">未開始</view>
				<view class="xiaolv titletext" v-if="item.status==2">生效中</view>
				<view class="xiaohong titletext" v-if="item.status==3">已過期</view>
				<view class="flexbetween pdl" style="padding-bottom: 10rpx;">
					<view class="flexleft ">
						<view class="margin_right2" v-if="item.data_type==1">
							<view class="huang_text titletext bold" style="font-size: 50rpx;">${{item.dk_money}}</view>
							<view class="hui_text main_size margin_top bold">滿{{item.di_money}}可用</view>
						</view>
						<view class="margin_right2" v-if="item.data_type==2">
							<image :src="item.image_text" mode=""
								style="width: 120rpx;height: 120rpx;min-width: 120rpx;"></image>
							<view class="hui_text main_size margin_top bold">滿{{item.di_money}}可用</view>
						</view>
						<view class="line margin_right2"></view>

						<view>
							<view class="hei_text titletext bold" style="word-break: break-all;">
								{{item.name}}
							</view>
						</view>
					</view>
					<image src="@/static/image/system/ewm.png" mode=""
						style="width:100rpx;height: 100rpx;min-width: 100rpx;"
						v-if="item.type==2 && (item.status==2 || item.status==1 || item.status==0)"
						@click="proviewscan(item.id)"></image>
				</view>
				<view class=" margin_top1 hui_text smalltext bold">領取時間</view>
				<view class="hong_text bold ">
					{{http.timereturn(item.get_starttime*1000)}}~{{http.timereturn(item.get_endtime*1000)}}</view>
				<view class="hui_text smalltext bold">使用時間</view>
				<view class="hong_text bold ">
					{{http.timereturn(item.starttime*1000)}}~{{http.timereturn(item.endtime*1000)}}</view>
				<view class="flexbetween margin_top1">
					<view class="lan_text  bold">{{item.use_type==1?'單張':'多張'}}使用</view>
					<view class="flexleft hei_text main_size bold">共：{{item.num}}張 餘：{{item.end_num}}張</view>
				</view>
				<view class="flexright margin_top2 hei_text main_size bold" v-if="tabsid!=3">
					<view class="flexleft" @click="shareyh(item)">
						<u-icon name="share" color="#999" size="16"></u-icon>
						<view>分享</view>
					</view>
					<view class="flexleft margin_left" @click="zhiding(item.id)">
						<u-icon name="fingerprint" color="#999" size="16"></u-icon>
						<view>指定</view>
					</view>
					<view class="flexleft margin_left" @click="bj(item.id)">
						<u-icon name="eye" color="#999" size="16"></u-icon>
						<view class="xiaohei">查看</view>
					</view>
					<view class="flexleft margin_left" @click="delitem(item)">
						<u-icon name="trash" color="#999" size="16"></u-icon>
						<view class="xiaohei">刪除</view>
					</view>
				</view>
			</view>
		</view>

		<u-modal :show="scanshow" title="掃碼領券" cancelText="關閉" confirmText="刷新二維碼" showCancelButton
			@confirm="proviewscant" @cancel="scanshow=false" confirmColor="#ffb800">
			<view class="slot-content" style="width: 600rpx;">
				<view class="flexcenter" v-if="scanshow">
					<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="qrcodeurl_text" :options="{ margin: 10}"
						size="300">
					</uqrcode>
				</view>
				<view class="flexcenter" @click="scanshow=false;scanshowhgd=true">
					<view class="textcenter hei_text radius main_size margin_top mainpadding"
						style="border: 1rpx solid #333;">切換固定二維碼</view>
				</view>
			</view>
		</u-modal>
		<u-modal :show="scanshowhgd" title="掃碼領券" confirmText="關閉" @confirm="scanshowhgd=false" confirmColor="#606266">
			<view class="slot-content" style="width: 600rpx;">
				<view class="flexcenter" v-if="scanshowhgd">
					<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="qrcodeurl_textgd" :options="{ margin: 10}"
						size="300">
					</uqrcode>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsid: 1,
				tabslist: [{
					name: '客戶自動領取',
					value: 1,
				}, {
					name: '客戶排隊領取',
					value: 2,
				}, {
					name: '已過期',
					value: 3,
				}],
				ralllist: [],
				qrcodeurl: "",
				qrcodeurl_text: "",
				scanshow: false,
				scanshowhgd: false,
				status: 2,
				qrcodeurl_textgd: "",
				tab_type: 1,
				toplist: [{
					name: '總店',
					value: 1,
				}, {
					name: '分店',
					value: 2,
				}]
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			shareyh(item) {
				let that = this
				if (navigator.share) {
					navigator.share({
							title: item.share_tilte,
							text: item.share_tilte,
							url: "https://opos.tw/pages_index/lingquan?id=" + uni.getStorageSync('shop_id'), // 當前頁面 URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			changetab(e) {
				console.log(e, "999");
				this.tabsid = e.value
				this.init()
			},
			proviewscan(id) {
				this.scanid = id
				this.qrcodeurl_text = this.qrcodeurl + "?id=" + id + "&time=" + Number(new Date())
				this.qrcodeurl_textgd = this.qrcodeurl + "?id=" + id
				console.log(this.qrcodeurl_textgd, "二維碼鏈接");
				this.scanshow = true
			},
			proviewscant() {
				this.qrcodeurl_text = this.qrcodeurl + "?id=" + this.scanid + "&time=" + Number(new Date())
				console.log(this.qrcodeurl_text, "二維碼鏈接");
				this.scanshow = true
			},
			delitem(item) {
				this.http.modal('提示', '確認刪除當前數據嗎？', true, (res) => {
					if (res) {
						this.http.request("/api/shop/ralldel", 'POST', {
							id: item.id
						}).then(res => {
							if (res.code == 1) {
								this.http.toast("刪除成功")
								this.init()
							} else {
								this.http.toast(res.msg);
							}
						})
					}
				})
			},
			bj(id) {
				uni.navigateTo({
					url: '/pages/workbench/tianjiayhq?id=' + id
				})
			},
			async init() {
				let res = await this.http.request("/api/shop/ralllist", 'POST', {
					shop_id: uni.getStorageSync("shop_id"),
					type: this.tabsid == 3 ? "" : this.tabsid,
					status: this.tabsid == 3 ? 3 : 1,
					tab_type: this.tab_type
				})
				if (res.code == 1) {
					this.ralllist = res.data.data
					this.qrcodeurl = res.data.yhj_link
				} else if (res.code == 0) {
					this.http.toast(res.msg);
				} else {
					this.http.toast('暫無數據');
				}
			},
			zhiding(id) {
				uni.navigateTo({
					url: '/pages/workbench/kehugl?type=1&id=' + id
				})

			},
			tianjia() {
				uni.navigateTo({
					url: '/pages/workbench/tianjiayhq'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		width: 2rpx;
		height: 50rpx;
		background-color: #999;
	}

	.all1 {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		padding: 11rpx 38rpx;
		border: 2rpx solid #FF8505;
	}

	.all2 {
		background: #fFF;
		border-radius: 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		padding: 11rpx 38rpx;
		border: 2rpx solid #FF8505;
		border-right: none;
		border-left: none;
	}

	.all3 {
		background: #fFF;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		padding: 11rpx 38rpx;
		border: 2rpx solid #FF8505;
	}

	.checkall {
		background-color: #FF8505 !important;
		color: #fff !important;
	}

	.baisebj {
		box-shadow: 0px -7px 10px rgba(0, 0, 0, 0.1);
		background-color: rgba(255, 184, 0, 0.3);
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 15rpx !important;
		color: #333;
	}

	.huangsebj {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>